<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>问卷调查的前端设计</title>
</head>
<body>
    <div id="app">
        <h2>问卷调查</h2>
        <p>
            姓名：
            <input type="text" v-model="name">
        </p>
        <p>
            性别：
            <input type="radio" name="sex" value="男" v-model="sex">男
            <input type="radio" name="sex" value="女" v-model="sex">女
        </p>
        <p>
            爱好：
            <input type="checkbox" name="hobby" value="打篮球" v-model="hobby" checked>打篮球
            <input type="checkbox" name="hobby" value="跳舞" v-model="hobby">跳舞
            <input type="checkbox" name="hobby" value="读书" v-model="hobby">读书
        </p>
        <p>
            籍贯：
            <select name="native" id="" v-model="native">
                <option value="河北">河北</option>
                <option value="河南">河南</option>
                <option value="山东">山东</option>
                <option value="山西">山西</option>
                <option value="湖南">湖南</option>
                <option value="湖北">湖北</option>
            </select>
        </p>
        <p>您填写的表单内容为：姓名：{{name}}</p>
        <p>您填写的表单内容为：性别：{{sex}}</p>
        <p>您填写的表单内容为：爱好：{{hobby}}</p>
        <p>您填写的表单内容为：籍贯：{{native}}</p>
        <button @click="sumbit">提交</button>
    </div>
    <script src="js/vue2.js"></script>
    <script>
        var vue=new Vue({
                el:"#app",
                data:{
                    name:'',
                    sex:'男',
                    hobby:[],
                    native:'湖北'

                },
                methods:{
                    sumbit(){
                        let obj={
                            name:this.name,
                            sex:this.sex,
                            hobby:this.hobby,
                            native:this.native
                        }
                        console.log(obj)
                    }

                }
        })
    </script>
</body>
</html>